<template>
	<view class='page'>
		<video :src="video"
		 controls class="video"></video>

		<view class='courseInfo bg_white'>
			<view class='courseTitle'>{{title}}</view>
			<view class='courseSub'>{{courseBrief}}</view>
			<view class='justify_between'>
				<view class='courseSub'>课时{{classHour}}节<text class='ml_30'>{{num}}人学过</text></view>
				<view class='heart'>
					<image src='../../static/icon_share2x.png' @click="onshare"></image>
					<image src='../../static/icon_Collection_click2x.png'></image>
				</view>
			</view>
			<view class='topLine mt_30'></view>
		</view>

		<view class='time'>
			<image src='../../static/icon_Countdown2x.png'></image>
			直播将于 {{start}} 开始
		</view>

		<!-- tab -->
		<view class="tabs mt_25" @click="tabFun">
			<view :class="tabArr.curHdIndex=='0'? 'active' : ''" id="tab-hd01" data-id="0">简介</view>
			<view :class="tabArr.curHdIndex=='1'? 'active' : ''" id="tab-hd02" data-id="1">目录</view>
		</view>
		<view class="tabContent">
			<!-- 简介 -->
			<view class="tabCont-item" :class="tabArr.curBdIndex=='0'? 'active' : ''">
				<view class="courses">
					<image :src="courseImg"></image>
					<view class="ml_20">
						<view class="fs_32">{{courseTitle}}</view>
						<view class="courseMsg">
							<image src="../../static/Star_yellow2x.png"></image>
							<image src="../../static/Star_yellow2x.png"></image>
							<image src="../../static/Star_yellow2x.png"></image>
							<image src="../../static/Star_yellow2x.png"></image>
							<image src="../../static/Star_gray2x.png"></image>
							<view class="ml_10">{{score}} | {{number}}人学过</view>
						</view>
					</view>
				</view>
				<view class='courseCont'>
					<!-- 授课老师 -->
					<view class="itemBox">
						<view class='itemTitle'>授课老师</view>
						<view class='mt_30'>
							<view class='teacherHead'>
								<image :src='head'></image>
							</view>
							<view class='ml_20'>
								<view class="teacherName">{{name}}</view>
								<view class='fs_28 color_8E'>
									<text class='color_black'>简介：</text>
									{{brief}}
								</view>
							</view>
						</view>
					</view>

					<view class="itemBox">
						<view class='itemTitle'>课程详情</view>
						<view class='courseDetails'>{{details}}</view>
					</view>

					<view class="itemBox">
						<view class='itemTitle'>课程使用人群</view>
						<view class='courseTxt' v-for="(fit, index) in fits" :key="index">{{index+1+'、'+fit.fitTxt}}</view>
					</view>
				</view>

				<!-- 评价 -->
				<view class="comments">
					<view class="justify_between fs_34 ptb_20">
						<view>课程评价({{commentNum}})</view>
						<view>{{courseScore}}星</view>
					</view>

					<view class="commentList">
						<view class="comment">
							<view class="commHead">
								<image src="../../static/Candy2x.png"></image>
							</view>
							<view class="commInfo">
								<view class="justify_between">
									<view class="ml_20">
										<view>成飞</view>
										<view class="color_9d fs_24">2019-10-10</view>
									</view>
									<view class="courseMsg">
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_gray2x.png"></image>
									</view>
								</view>
								<view class="commTxt">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</view>
							</view>
						</view>
						<view class="comment">
							<view class="commHead">
								<image src="../../static/Candy2x.png"></image>
							</view>
							<view class="commInfo">
								<view class="justify_between">
									<view class="ml_20">
										<view>成飞</view>
										<view class="color_9d fs_24">2019-10-10</view>
									</view>
									<view class="courseMsg">
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_yellow2x.png"></image>
										<image src="../../static/Star_gray2x.png"></image>
									</view>
								</view>
								<view class="commTxt">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</view>
							</view>
						</view>
					</view>

					<view class="ptb_20 text_center">没有更多了</view>
				</view>
			</view>

			<!-- 目录 -->
			<view class="tabCont-item" :class="tabArr.curBdIndex=='1'? 'active' : ''">
				<!-- 单课程 -->
				<view class='p_30 bg_white catalogs'>
					<view class='catalogList'>
						<view class='catalogImg'>
							<image :src='cSrc'></image>
						</view>
						<view class='catalogTxt'>
							<view>{{cTitle}}</view>
							<view class='catalogDatas'>
								<view class='flex'>
									<view class='catalogData'>
										<image src='../../static/icon_bofang_12x.png'></image>
										{{cNum}}w
									</view>
									<view class='catalogData'>
										<image src='../../static/icon_news_12x.png'></image>
										{{cComment}}<text>试看</text>
									</view>
								</view>
								<view>{{cDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部菜单 -->
		<view class='bottomMenu'>
			<view class='price'>价格：<text>￥199</text></view>
			<navigator url='' class='buy'>点击预约</navigator>
		</view>

		<!-- 遮罩 -->
		<view class='mask' v-show='mask' @click="onMask"></view>
		<!-- 弹窗 -->
		<view class='popup' v-show='popup'>
			<view class="shareTitle">分享给好友</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="shareLink">
				<view>
					<image src="../../static/icon_WeChat2x.png"></image>
					<view>微信好友</view>
				</view>
				<view>
					<image src="../../static/icon_friends2x.png"></image>
					<view>朋友圈</view>
				</view>
				<view>
					<image src="../../static/wxq.png"></image>
					<view>微信群邀请</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="shareLink">
				<view>
					<image src="../../static/icon_weibo2x.png"></image>
					<view>微博</view>
				</view>
				<view>
					<image src="../../static/icon_WeChat2x.png"></image>
					<view>微信</view>
				</view>
				<view>
					<image src="../../static/icon_friends2x.png"></image>
					<view>朋友圈</view>
				</view>
				<view>
					<image src="../../static/icon_QQ2x.png"></image>
					<view>QQ</view>
				</view>
				<view>
					<image src="../../static/icon_qqkongjian2x.png"></image>
					<view>QQ空间</view>
				</view>
			</view>
			<!-- #endif -->
			<button @click="onMask">取消</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				video: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
				title: '冲刺高考数学',
				courseBrief: '简介简介简介简介简介简介简介简介',
				classHour: 36,
				num: 3215,
				start: '2019-01-02 10:00',
				// tab
				tabArr: {
					curHdIndex: 0,
					curBdIndex: 0
				},
				// 分享
				mask: false,
				popup: false,
				// 简介
				courseImg: '../../static/img_kecheng02.png',
				courseTitle: '冲刺高考数学学习，在线解答难题答疑',
				score: '4.0',
				number: 1210,
				head: '../../static/tx02.png',
				name: 'Candy',
				brief: '著名数学教育专家，内蒙古一机集团第一中学首批高级教师，教授。著名数学教育专家，内蒙古一机集团第一中学首批高级教师，教授。',
				details: '课程详情内容课程详情内容课程详情内容课程详情内容课程详情内容课程详情内容课程详情内容课程详情内容',
				fits: [
					{
						fitTxt: '语文作文水平想要提高的人'
					},
					{
						fitTxt: '四年级'
					}
				],
				commentNum: 2,
				courseScore: '4.0',
				// 目录  单课程
				cSrc: '../../static/img_kecheng2x.png',
				cTitle: '3周冲刺高中数学函数难题',
				cNum: 4.8,
				cComment: 1020,
				cDate: '06-08 17:30',
			}
		},
		methods: {
			// tab
			tabFun: function(e) { 
				var _datasetId = e.target.dataset.id;
				var _obj = {};
				_obj.curHdIndex = _datasetId;
				_obj.curBdIndex = _datasetId;
				this.tabArr = _obj
			},

			// 分享
			onshare: function() {
				this.mask = !this.mask,
				this.popup = !this.popup
			},
			onMask:function() {
				this.mask = false,
				this.popup = false
			}
		}
	}
</script>

<style>
	.page {
		margin-bottom: 120rpx;
	}

	.video {
		width: 100%;
		height: 360rpx;
	}

	.courseInfo {
		padding: 30rpx 30rpx 0;
	}

	.courseTitle {
		font-size: 36rpx;
		font-weight: 600;
	}

	.courseSub {
		font-size: 24rpx;
		color: #8D8D8D;
		line-height: 2;
	}

	.heart image {
		width: 30rpx;
		height: 28rpx;
		margin-left: 30rpx;
	}

	.time {
		background: #fff;
		padding: 30rpx;
		font-size: 24rpx;
	}

	.time image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	/* tab */
	.tabs {
		display: flex;
		line-height: 2.5;
		background: #fff;
		padding: 0 30rpx;
	}

	.tabs view {
		flex: 1;
		color: #686868;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tabs .active {
		font-size: 30rpx;
		color: #000;
		position: relative;
	}

	.tabs .active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 10%;
		height: 5rpx;
		background: #1F7AFF;
		margin: 0 auto;
	}

	.tabContent .tabCont-item {
		display: none;
	}

	.tabContent .tabCont-item.active {
		display: block;
	}

	/* 简介 */
	.courses {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 10rpx;
		display: flex;
	}

	.courses>image {
		width: 175rpx;
		height: 130rpx;
	}

	.courseMsg {
		font-size: 24rpx;
		color: #8D8D8D;
		margin-top: 15rpx;
		display: flex;
	}

	.courseMsg image {
		width: 24rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.courseCont {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.itemTitle {
		font-size: 34rpx;
		position: relative;
		padding-left: 20rpx;
	}

	.itemTitle::before {
		content: "";
		position: absolute;
		top: 8rpx;
		left: 0;
		width: 6rpx;
		height: 35rpx;
		background-color: #1F7AFF;
	}

	.teacherHead {
		text-align: center;
	}

	.teacherHead image {
		width: 124rpx;
		height: 124rpx;
	}

	.teacherName {
		text-align: center;
		margin: 20rpx 0;
	}

	.itemBox {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.courseDetails {
		font-size: 30rpx;
		color: #8E8E8C;
		line-height: 1.4;
		margin-top: 20rpx;
	}

	.courseTxt {
		font-size: 30rpx;
		color: #8E8E8C;
		line-height: 2;
	}

	.comments {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.comment {
		display: flex;
		padding: 30rpx 0;
	}

	.commentList .comment:not(:last-child) {
		border-bottom: 1rpx solid #F9F9F9;
	}

	.commHead image {
		width: 68rpx;
		height: 68rpx;
	}

	.commInfo {
		width: 100%;
	}

	.commTxt {
		font-size: 24rpx;
		color: #808080;
		margin-top: 20rpx;
	}

	.commTips {
		text-align: center;
	}

	/* 目录 */
	.catalogs .catalogList:last-child {
		margin-bottom: 0;
	}

	.catalogList {
		display: flex;
		margin-bottom: 20rpx;
	}

	.catalogImg image {
		width: 200rpx;
		height: 136rpx;
		display: block;
	}

	.catalogTxt {
		margin-left: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 5rpx 0;
	}

	.catalogDatas {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #BABABA;
	}

	.catalogData {
		margin-right: 30rpx;
	}

	.catalogData image {
		width: 20rpx;
		height: 20rpx;
	}

	.catalogData text {
		display: inline-block;
		color: #2E90FF;
		border: 1rpx solid #2E90FF;
		padding: 0 6rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
		font-size: 20rpx;
	}

	/* 底部菜单 */
	.bottomMenu {
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border: 1rpx solid #eee;
		height: 110rpx;
		box-sizing: border-box;
	}

	.price {
		flex: 1;
		font-size: 28rpx;
		color: #797979;
		height: 90rpx;
		line-height: 90rpx;
	}

	.price text {
		font-size: 44rpx;
		color: #FA2A01;
	}

	.buy {
		flex: 1;
		background-color: #FF8A00;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	/* 遮罩 */
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
	}

	/* 弹窗 */
	.popup {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 9;
	}

	.shareTitle {
		text-align: center;
		color: #5C595A;
		padding: 30rpx 0;
		font-size: 26rpx;
	}

	.shareLink {
		display: flex;
		margin-bottom: 30rpx;
	}

	.shareLink view {
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		color: #5C595A;
	}

	.shareLink image {
		width: 88rpx;
		height: 88rpx;
	}
</style>
